<template>
    <div class="container">
      <ul class="container--item">
        <li class="container--item__list"
            @click="textList(key)"
            v-for="(item, key) in textArr" :key="key">{{item}}</li>
        <li class="container--item__move" :style="{left: left}"></li>
      </ul>
      <div class="container--item__img" v-if="backDel">
        <img src="../assets/receivingAddress/orderBgrd.png"
             class="container--img__bag"
             alt="#">
        <span class="container--img__text">暂无数据</span>
      </div>
      <div class="container--betterScroll__box">
        <div class="container--components__box">
          <all></all>
          <PendingPayment v-if="a" class="animated fadeIn"></PendingPayment>
          <div class="animated fadeIn"
               style="font-size: 1rem;width: 100vw;height: 100vh;display: inline-block" v-else>
            <div class="loading">
              <div class="all">
                <div class="circle-opactiy">
                  <div class="child circle1"></div>
                  <div class="child circle2"></div>
                  <div class="child circle3"></div>
                  <div class="child circle4"></div>
                  <div class="child circle5"></div>
                  <div class="child circle6"></div>
                  <div class="child circle7"></div>
                  <div class="child circle8"></div>
                  <div class="child circle9"></div>
                  <div class="child circle10"></div>
                  <div class="child circle11"></div>
                  <div class="child circle12"></div>
                </div>
              </div>
              <span class="container--loading__text">正在为您拼命加载中~</span>
            </div>
          </div>
          <ceshi3 v-if="e" class="animated fadeIn"></ceshi3>
          <div class="animated fadeIn"
               style="font-size: 1rem;width: 100vw;height: 100vh;display: inline-block" v-else>
            <div class="loading">
              <div class="all">
                <div class="circle-opactiy">
                  <div class="child circle1"></div>
                  <div class="child circle2"></div>
                  <div class="child circle3"></div>
                  <div class="child circle4"></div>
                  <div class="child circle5"></div>
                  <div class="child circle6"></div>
                  <div class="child circle7"></div>
                  <div class="child circle8"></div>
                  <div class="child circle9"></div>
                  <div class="child circle10"></div>
                  <div class="child circle11"></div>
                  <div class="child circle12"></div>
                </div>
              </div>
              <span class="container--loading__text">正在为您拼命加载中~</span>
            </div>
          </div>
          <Completed v-if="c" class="animated fadeIn"></Completed>
          <div class="animated fadeIn"
               style="font-size: 1rem;width: 100vw;height: 100vh;display: inline-block" v-else>
            <div class="loading">
              <div class="all">
                <div class="circle-opactiy">
                  <div class="child circle1"></div>
                  <div class="child circle2"></div>
                  <div class="child circle3"></div>
                  <div class="child circle4"></div>
                  <div class="child circle5"></div>
                  <div class="child circle6"></div>
                  <div class="child circle7"></div>
                  <div class="child circle8"></div>
                  <div class="child circle9"></div>
                  <div class="child circle10"></div>
                  <div class="child circle11"></div>
                  <div class="child circle12"></div>
                </div>
              </div>
              <span class="container--loading__text">正在为您拼命加载中~</span>
            </div>
          </div>
          <ceshi5 v-if="d" class="animated fadeIn"></ceshi5>
          <div class="animated fadeIn"
               style="font-size: 1rem;width: 100vw;height: 100vh;display: inline-block" v-else>
            <div class="loading">
              <div class="all">
                <div class="circle-opactiy">
                  <div class="child circle1"></div>
                  <div class="child circle2"></div>
                  <div class="child circle3"></div>
                  <div class="child circle4"></div>
                  <div class="child circle5"></div>
                  <div class="child circle6"></div>
                  <div class="child circle7"></div>
                  <div class="child circle8"></div>
                  <div class="child circle9"></div>
                  <div class="child circle10"></div>
                  <div class="child circle11"></div>
                  <div class="child circle12"></div>
                </div>
              </div>
              <span class="container--loading__text">正在为您拼命加载中~</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import Completed from '../components/order/Completed';
import PendingPayment from '../components/order/PendingPayment';
import ceshi3 from '../components/order/ceshi3';
import all from '../components/order/all';
import ceshi5 from '../components/order/ceshi5';
import { Throttle } from '../publicFunction';

export default {
  name: 'myOrder',
  components: {
    all,
    PendingPayment,
    ceshi3,
    Completed,
    ceshi5,
  },
  data() {
    return {
      backDel: false,
      textArr: ['全部', '待付款', '待收货', '已完成', '已取消'],
      left: '.55rem',
      betterScroll: null,
      a: false,
      e: false,
      c: false,
      d: false,
    };
  },
  methods: {
    /* eslint-disable*/
    textList(key) {
      this.left = (key * 2) + 0.55 + 'rem';
      this.betterScroll.goToPage(key, 0, 0);
      if (key === 1) this.a = true;
      if (key === 2) this.e = true;
      if (key === 3) this.c = true;
      if (key === 4) this.d = true;
    },
  },
  mounted() {
    this.$nextTick(()=>{
      if (!this.betterScroll) {
        this.betterScroll = new this.$Bs('.container--betterScroll__box', {
          scrollX: true,
          scrollY: false,
          momentum: false, // 当快速滑动时是否开启滑动惯性
          snap: {
            threshold: 0.15,
          },
          bounce: false, // 是否启用回弹动画效果
          click: true,
          probeType: 3, // 分发事件的情况
        });
        this.betterScroll.on('scroll', Throttle(() => {
          this.betterScroll.getCurrentPage().pageX < 5 ?
            this.left = ((this.betterScroll.getCurrentPage().pageX) * 2) + 0.55 + 'rem' :
            this.left = (4 * 2) + 0.55 + 'rem';
          if (this.betterScroll.getCurrentPage().pageX === 1) this.a = true;
          if (this.betterScroll.getCurrentPage().pageX === 2) this.e = true;
          if (this.betterScroll.getCurrentPage().pageX === 3) this.c = true;
          if (this.betterScroll.getCurrentPage().pageX >= 4) this.d = true;
        }, 100));
      } else {
        this.betterScroll.refresh();
      }
    });

  },
  updated() {
    this.betterScroll.refresh()
  }
};
</script>

<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  font-size: 0;
}
.loading{
  height: 2.6rem;
  width: 3.9rem;
  background-color: #e8e8e8;
  border-radius: 4px;
  margin: auto;
  position: relative;
  top: 20%;
  .container--loading__text{
    text-align: center;
    font-size: .4rem;
    display: block;
    color: #464646;
    position: relative;
    left: 0;
    right: 0;
    top: .75rem;
    bottom: 0;
    margin: auto;
  }
  .all{
    flex: 1 1 25%;
    .circle-opactiy{
      width: (75/75) + rem;
      height: (75/75) + rem;
      margin: auto;
      position: relative;
    }
    .circle-opactiy .child{
      position: absolute;
      left: 0;
      top: .5rem;
      width: 100%;
      height: 100%;
    }
    .circle-opactiy .child::before{
      content: "";
      display: block;
      margin:  0 auto;
      width: 15%;
      height: 15%;
      background-color: #818181;
      border-radius: 100%;
      animation: circle-opacity 1.2s infinite ease-in-out;
    }
    .circle-opactiy .circle2{
      transform: rotate(30deg);
    }
    .circle-opactiy .circle2::before{
      animation-delay: -1.1s;
    }
    .circle-opactiy .circle3{
      transform: rotate(60deg);
    }
    .circle-opactiy .circle3::before{
      animation-delay: -1s;
    }
    .circle-opactiy .circle4{
      transform: rotate(90deg);
    }
    .circle-opactiy .circle4::before{
      animation-delay: -.9s;
    }
    .circle-opactiy .circle5{
      transform: rotate(120deg);
    }
    .circle-opactiy .circle5::before{
      animation-delay: -.8s;
    }
    .circle-opactiy .circle6{
      transform: rotate(150deg);
    }
    .circle-opactiy .circle6::before{
      animation-delay: -.7s;
    }
    .circle-opactiy .circle7{
      transform: rotate(180deg);
    }
    .circle-opactiy .circle7::before{
      animation-delay: -.6s;
    }
    .circle-opactiy .circle8{
      transform: rotate(210deg);
    }
    .circle-opactiy .circle8::before{
      animation-delay: -.5s;
    }
    .circle-opactiy .circle9{
      transform: rotate(240deg);
    }
    .circle-opactiy .circle9::before{
      animation-delay: -.4s;
    }
    .circle-opactiy .circle10{
      transform: rotate(270deg);
    }
    .circle-opactiy .circle10::before{
      animation-delay: -.3s;
    }
    .circle-opactiy .circle11{
      transform: rotate(300deg);
    }
    .circle-opactiy .circle11::before{
      animation-delay: -.2s;
    }
    .circle-opactiy .circle12{
      transform: rotate(330deg);
    }
    .circle-opactiy .circle12::before{
      animation-delay: -.1s;
    }
    @keyframes circle-opacity {
      0%{
        opacity: 0;
      }
      40%{
        opacity: 1;
      }
      80%{
        opacity: 0;
      }
      100%{
        opacity: 0;
      }
    }
  }
}
.container{
  background-color: #f4f4f4;
  width: 100vw;
  height: 100vh;
  .container--item{
    position: relative;
    list-style: none;
    width: 100vw;
    background-color: #fff;
    margin-bottom: (15/75) + rem;
    .container--item__list{
      display: inline-block;
      text-align: center;
      line-height: 1rem;
      width: 20%;
      font-size: .4rem;
    }
    .colorText{
      color: #3d64dd;
    }
    .container--item__move{
      position: absolute;
      bottom: .1rem;
      width: .9rem;
      height: 2px;
      background-color: #1a76d9;
      transition: left .3s ease-in-out;
    }
  }
  .container--item__img{
    position: static;
    width: 100vw;
    height: 86.5%;
    background-color: #fff;
    .container--img__bag{
      width: 5rem;
      height: 4.2rem;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      display: block;
    }
    .container--img__text{
      font-size: .37rem;
      position: absolute;
      left: 40%;
      top: 60%;
      color: #8b8b8b;
      font-weight: 500;
    }
  }
  .container--betterScroll__box{
    width: 100vw;
    height: 100vh;
    .container--components__box{
      width: 500vw;
    }
  }
}
</style>
